<ng-container *ngIf="device">
  <div class="w-100 h-100 d-flex flex-column overflow-hidden" [class.loading]="!state.items && !state.error"
       *ngIf="files$ | async as state">
    <div class="manager-toolbar navbar bg-panel border-bottom d-flex flex-row flex-nowrap px-2">
      <div class="btn-group">
        <button class="btn btn-sm btn-outline-primary" (click)="navBack()" [disabled]="history?.canBack !== true">
          <i class="bi bi-chevron-left"></i>
        </button>
        <button class="btn btn-sm btn-outline-primary" (click)="navForward()" [disabled]="history?.canForward !== true">
          <i class="bi bi-chevron-right"></i>
        </button>
      </div>
      <div class="flex-fill mx-2 breadcrumb-bar border rounded">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb my-0 btn-group flex-nowrap">
            <li>
              <select class="breadcrumb-item form-select form-select-sm border-0 border-end rounded-end-0"
                      [value]="device.name" (change)="deviceManager.setDefault(deviceSelect.value)" #deviceSelect>
                @let devices = deviceManager.devices$ | async;
                @for (item of devices; track item.name) {
                  <option [value]="item.name" [selected]="item.name === device.name">{{ item.name }}</option>
                }
              </select>
            </li>
            @if (history) {
              @for (dir of state.breadcrumb; track $index) {
                <li
                  class="breadcrumb-item btn btn-sm btn-outline-secondary text-nowrap border-top-0 border-bottom-0 rounded-0"
                  [class.border-start-0]="$index === 0"
                  (click)="breadcrumbNav(state.breadcrumb.slice(0, $index + 1))">
                  <span *ngIf="$index > 0; else rootLabel">{{ dir }}</span>
                  <ng-template #rootLabel><i class="bi-hdd-fill me-1"></i>/</ng-template>
                </li>
              }
            } @else {
              <ng-container *ngTemplateOutlet="locationConnectingAndError"></ng-container>
            }
          </ol>
          <ng-template #locationConnectingAndError>
            <ul class="breadcrumb my-0 btn-group flex-nowrap">
              <li class="breadcrumb-item btn btn-sm disabled text-nowrap border-0" [ngSwitch]="!!state.error">
                <ng-container *ngSwitchCase="true">Failed to connect to {{ device.name }}</ng-container>
                <ng-container *ngSwitchDefault>Connecting to {{ device.name }}...</ng-container>
              </li>
            </ul>
          </ng-template>
        </nav>
      </div>
      <button class="btn btn-sm btn-danger ms-2" [disabled]="!history || !hasSelection"
              (click)="removeFiles(selectedItems)" ngbTooltip="Delete" container="body">
        <i class="bi bi-trash"></i>
      </button>
      <button class="btn btn-sm btn-primary ms-2" [disabled]="!history || !hasSelection"
              (click)="downloadFiles(selectedItems)" ngbTooltip="Download" container="body">
        <i class="bi bi-download"></i>
      </button>
      <div class="btn-group ms-2" ngbDropdown container="body" display="dynamic" role="group"
           aria-label="More options">
        <button class="btn btn-sm btn-primary" [disabled]="!history" ngbDropdownToggle>
          <i class="bi bi-plus-lg"></i>
        </button>
        <ul class="dropdown-menu" ngbDropdownMenu>
          <li ngbDropdownItem (click)="uploadFiles()">
            <i class="bi bi-upload me-3"></i>Upload
          </li>
          <li ngbDropdownItem (click)="createDirectory()">
            <i class="bi bi-folder-plus me-3"></i>New Directory...
          </li>
        </ul>
      </div>
    </div>
    <div class="flex-fill table-responsive" *ngIf="state.items as items else loadingAndError">
      <app-files-table [items]="items" (opened)="openItem($event)" (selected)="selectionChanged($event)">
      </app-files-table>
    </div>
    <ng-template #loadingAndError>
      @if (state.error) {
        <div class="p-3">
          <app-error-card title="Unable to list directory" [error]="state.error" (retry)="cd(state.dir)"
                          *ngSwitchCase="true"/>
        </div>
      } @else {
        <app-loading-card/>
      }
    </ng-template>
    <div class="stat-bar d-flex flex-row align-items-center border-top bottom-0 mt-auto">
      <small class="px-2" *ngIf="state.items as items">
        {{ items.length }} {{ items.length === 1 ? 'item' : 'items' }}
      </small>
      <app-stat-storage-info class="ms-auto me-3 storage-info-bar" [device]="device"
                             [location]="cwd"></app-stat-storage-info>
    </div>
  </div>
</ng-container>
